<template>
  <view class="p-3">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view class="card">
      <view class="card_item flex content-center">
        <view class="left"> {{currentLanguageTexts.name}} </view>
        <input
          class="right"
          v-model="formData.name"
          type="text"
          :placeholder="currentLanguageTexts.PleaseName"
        />
      </view>
      <view class="card_item flex content-center">
        <view class="left"> {{currentLanguageTexts.CardNumber}} </view>
        <input
          class="right"
          v-model="formData.bankCode"
          type="text"
          :placeholder="currentLanguageTexts.PleaseCardNumber"
        />
      </view>
	  
      <view class="card_item flex content-center">
        <view class="left"> {{currentLanguageTexts.BankName}} </view>
        <input
          class="right"
          v-model="formData.bankName"
          type="text"
          :placeholder="currentLanguageTexts.PleaseCardName"
        />
      </view>
      <view class="card_item flex content-center">
        <view class="left"> {{currentLanguageTexts.phone}} </view>
        <input
          class="right"
          maxlength="11"
          type="text"
          v-model="formData.bankMobile"
          :placeholder="currentLanguageTexts.LoginPhonePlaceholder"
        />
      </view>
    </view>
    <view class="qrbtn" @click="add"> {{currentLanguageTexts.confirm}} </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { addCard } from '@/api/merchant';
import { onLoad } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { isValidBankCard, validatePhoneNumber } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.AddBankCard);
const formData = ref({
  bankName: '',
  bankCode: '',
  name: '',
  bankMobile: '',
  shopId: merchartShop.value.id,
});

const add = async () => {
  if (formData.value.name == '') {
    uni.showToast({
      title: currentLanguageTexts.value.PleaseName,
      icon: 'error',
    });
    return;
  }

  if (!isValidBankCard(formData.value.bankCode)) {
    uni.showToast({
      title: currentLanguageTexts.value.PleaseCorrectCardNumber,
      icon: 'error',
    });
    return;
  }
  if (formData.value.bankName == '') {
    uni.showToast({
      title: currentLanguageTexts.value.PleaseCardName,
      icon: 'error',
    });
    return;
  }
  if (!validatePhoneNumber(formData.value.bankMobile)) {
    uni.showToast({
      title: currentLanguageTexts.value.PleaseCorrectPhoneNumber,
      icon: 'error',
    });
    return;
  }

  let res = await addCard(formData.value);
  if (res) {
    uni.navigateBack();
  }
};
</script>

<style lang="scss">
.title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin: 16rpx 0 0;
}

.card {
  padding: 0 40rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 40rpx 0 100rpx;

  .card_item {
    padding: 34rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f5f5f5;

    .left {
      font-size: 28rpx;
      color: #333333;
      width: 140rpx;
    }

    .btn {
      width: 158rpx;
      height: 50rpx;
      background: #ffffff;
      border-radius: 25rpx;
      border: 2rpx solid #0caffe;
      font-size: 24rpx;
      color: #0caffe;
      text-align: center;
      line-height: 50rpx;
      margin-top: -10rpx;
      margin-left: 20rpx;
    }
  }
}

.qrbtn {
  width: 700rpx;
  height: 98rpx;
  background: linear-gradient(90deg, #52c2f9 0%, #00abff 100%);
  border-radius: 14rpx;
  text-align: center;
  line-height: 98rpx;

  font-size: 32rpx;
  color: #ffffff;
}
</style>
